import { useEffect, useState } from "react"

function NotFound(props){
    let [time, setTime] = useState('')
    useEffect(()=>{
        
        const canvas = document.getElementById('canvas-clock');
        init(canvas)// 初始化
        // drawTime(canvas)
        let t = setInterval(()=>{
            drawTime(canvas)
            const date = new Date()
            setTime(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
        },1000)
        // (function animloop() {
        //     render();
        //     window.requestAnimationFrame(animloop);
        // })();
        return ()=>{
            clearInterval(t)
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    function init(canvas){
        canvas.innerText = '您的浏览器版本过低，请升级你的浏览器!';
        canvas.width = 400;
        canvas.height = 400;
        // canvas.style.border = '1px #ccc solid';
        canvas.style.borderRadius = '10px'
        canvas.style.background = ''
    }
    function draw(canvas){
        const ctx = canvas.getContext('2d');
        const { width, height } = canvas
        const { PI } = Math;
        const r = (width / 2) - 30;
        // 还原设置
        ctx.restore();
        // 清空画布
        ctx.clearRect(0, 0, width, height);

        ctx.save();
        // 定位到中心点
        ctx.translate(width / 2, height / 2);

        ctx.beginPath();
        ctx.lineWidth = 4;

        // 以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
        ctx.arc(0, 0, r, 0, 2 * PI, false);
        ctx.stroke();

        // 绘制刻度
        ctx.beginPath();
        ctx.lineWidth = 2;
        for (let i = 0; i < 60; i += 1) {
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, r, (6 * i * Math.PI) / 180, 6 * (i + 1) * (Math.PI / 180), false);
        }
        ctx.closePath();
        ctx.stroke();
        // 画实心圆
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, r - 30, 0, (360 * Math.PI) / 180, false);
        ctx.fill();

        // 画时针刻度线
        ctx.beginPath();
        ctx.lineWidth = 5;
        for (let i = 0; i < 12; i += 1) {
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, r, (30 * i * Math.PI) / 180, 30 * (i + 1) * (Math.PI / 180), false);
        }
        ctx.closePath();
        ctx.stroke();
        // 画实心圆
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, r - 60 / 2, 0, (360 * Math.PI) / 180, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();

    }
    function drawDot(canvas){
        const { width, height } = canvas;
        const ctx = canvas.getContext('2d');
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = '#F3A829';
        ctx.arc(width / 2, height / 2, 5, 0, 360, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }
    function drawTime(canvas){
        const ctx = canvas.getContext('2d');
        const { width, height } = canvas
        ctx.clearRect(0, 0, width, height);
        const date = new Date();
        const hoursRadian = ((date.getHours() * 30 - 90) * Math.PI) / 180;
        const minutesRadian = ((date.getMinutes() * 6 - 90) * Math.PI) / 180;
        const secondsRadian = ((date.getSeconds() * 6 - 90) * Math.PI) / 180;
        draw(canvas)
        drawHand(hoursRadian, 50, 10, 'black', canvas); // 绘制时针
        drawHand(minutesRadian, 90, 6, 'black', canvas); // 绘制分针
        drawHand(secondsRadian, 120, 3, '#F3A829', canvas); // 绘制秒针
        drawDot(canvas); // 绘制小圆点
        // ctx.clean()
        ctx.closePath();
        ctx.restore();
    }

    function drawHand(angle, len, lineWidth, color, canvas) {
        const { width, height } = canvas;
        // 获得 2d 上下文对象
        const ctx = canvas.getContext('2d');
        ctx.save();
        // 定位到中心点
        ctx.translate(width / 2, height / 2);
      
        ctx.shadowColor = '#000';
        ctx.shadowOffsetY = 30;
        ctx.shadowOffsetX = 30;
        ctx.shadowBlur = 30;
      
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
      
        ctx.rotate(angle);
        ctx.moveTo(0, 0);
        ctx.lineTo(-20, 0);
        ctx.lineTo(len + 20, 0);
      
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }
    return(
        <div style={{width: '100%', height: '100%',display: 'flex',flexDirection:'column',alignItems:'center',justifyContent: 'center'}}>
            <span style={{fontSize: '30px',whiteSpace:'nowrap',color:'rgb(44, 44, 44)'}}>404 not found</span>
            <br/>
            <span style={{fontSize: '30px',color:'rgb(44, 44, 44)'}}>{time}</span>
            <div style={{flex:0.5, width:'100%', textAlign:'center'}}>
                <canvas id="canvas-clock"></canvas>
            </div>
            <br/>
            <span style={{fontSize: '30px',whiteSpace:'nowrap',color:'rgb(44, 44, 44)'}}>什么都没找到</span>
        </div>
    )
}
export default NotFound  